
:scope {
  display: flex;
  width: 300px;
  margin: 18px auto 1.4rem;
}
.button {
  border: 1px solid white;
  background: var(--pink);
  color: white;
  padding: 8px 16px;
  margin: 0 -1px 0 0;
  flex-grow: 1;
  font-size: 1.4rem;
  transition: color .28s, background-color .28s;
  outline: none;
}


.button:first-of-type {
  border-radius: 16px / 50% 0 0 50%;
}

.button:last-of-type {
  border-radius: 16px / 0 50% 50% 0  ;
}

.button:hover, .button:focus {
  background-color: rgba(255, 255, 255, .25);
}

.button[active], .button[active]:hover, .button[active]:focus {
  background-color: white;
  color: var(--pink);
}


@media (max-width: 520px) {
  :scope {
    width: 100%;
  }
}